<!DOCTYPE html>
<html lang="en">



<head>
    <meta charset="UTF-8">
    <meta name="description" content="A High quality and rich functions, friendly APIs, free and flexible UI Toolkit based on Vue.js.">
    <title>卡片 Card - iView</title>
    <!-- 引入Vue -->
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
    <!-- 引入组件库 -->
    <script src="http://unpkg.com/iview/dist/iview.min.js"></script>

    <link rel="stylesheet" href="../static/css/innerPage.css">

    <style>
        .mt20 {
            margin-top: 20px;
        }
        
        .one .ivu-card {
            float: left;
            width: 32%;
            margin-left: 2%;
        }
        
        .one .ivu-card:first-child {
            margin-left: 0;
        }
        
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
            clear: both;
        }
    </style>

</head>

<body class="bg_ECF2F9">

    <div class="sc-container">

        <h1 class="mt20 clearfix">
            原始 ivew 的 card 样式
        </h1>

        <div class="mt20 one clearfix">



            <div class="ivu-card ivu-card-bordered">
                <div class="ivu-card-head">
                    <p><i class="ivu-icon ivu-icon-ios-film-outline"></i> 经典电影
                    </p>
                </div>
                <div class="ivu-card-extra"><a href="#"><i class="ivu-icon ivu-icon-ios-loop-strong"></i>
                                        换一换
                                    </a></div>
                <div class="ivu-card-body">

                </div>
            </div>

            <div class="ivu-card ivu-card-bordered">
                <div class="ivu-card-head">
                    <p><i class="ivu-icon ivu-icon-ios-film-outline"></i> 经典电影
                    </p>
                </div>
                <div class="ivu-card-extra"><a href="#"><i class="ivu-icon ivu-icon-ios-loop-strong"></i>
                                            换一换
                                        </a></div>
                <div class="ivu-card-body">

                </div>
            </div>

            <div class="ivu-card ivu-card-bordered">
                <div class="ivu-card-head">
                    <p><i class="ivu-icon ivu-icon-ios-film-outline"></i> 经典电影
                    </p>
                </div>
                <div class="ivu-card-extra"><a href="#"><i class="ivu-icon ivu-icon-ios-loop-strong"></i>
                                                换一换
                                            </a></div>
                <div class="ivu-card-body">

                </div>
            </div>
        </div>

        <div class="ivu-card ivu-card-bordered mt20 clearfix">
            <div class="ivu-card-head">
                <p><i class="ivu-icon ivu-icon-ios-film-outline"></i> 经典电影
                </p>
            </div>
            <div class="ivu-card-extra"><a href="#"><i class="ivu-icon ivu-icon-ios-loop-strong"></i>
                            换一换
                        </a></div>
            <div class="ivu-card-body">

            </div>
        </div>


    </div>





</body>

</html>